@import "color";
@import "tailwind";
:root {
  --md-text-code: #c9def1;
  --md-link: #38bdf8;
  --md-link-hover: #0ea5e9;
  --md-c-info-b: #475569;
  --md-c-waring-b: #d97706;
  --md-c-tip-b: #047857;
  --md-c-danger-b: #dc2626;
  --md-bg-alt: #101010;
  --md-pure: black;
  --shadow: rgba(0, 0, 0, .3);
  --md-high-line: rgba(11, 18, 24, .5);
}
body{
  font-family: -apple-system, system-ui,ui-sans-serif, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  text-rendering: optimizeLegibility;
  direction: ltr;
}

.font-system {
  font-family: -apple-system, system-ui,ui-sans-serif, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}
.font-lucida {
  font-family: "lucida grande", "lucida sans unicode", lucida;
}
.font-helvetica{
  font-family: "Helvetica Neue";
}
.font-hiragino-sans-gb {
  font-family: "Hiragino Sans GB";
}
.font-heiti-sc{
  font-family: "Heiti SC";
}
.font-times-new-roman {
  font-family: "Times New Roman";
}
.font-pingfang-sc {
  font-family: "PingFang SC";
}
.font-microsoft-yahei {
  font-family: "Microsoft Yahei";
}
.font-tahoma {
  font-family: Tahoma;
}
.font-simsun{
  font-family: SimSun;
}
.font-arial {
  font-family: Arial;
}
.font-verdana {
  font-family: Verdana;
}
a {
  text-decoration: none;
}
.edit-area{
  padding-bottom: 180px;
  min-height: calc(100vh - 220px);
  padding-top: 40px;
}
.pure-modal{
  .ant-modal-content{
    padding: 0;
  }
  .ant-modal-close{
    top: 15px;
  }
}

.heading-line{
  h1,h2,h3,h4,h5{
    @apply border-b dark:border-gray-200/10 border-gray-200;
  }
}
.dark .content {
  h1,h2,h3,h4,h5{
    color: rgba(255,255,255,.9);
  }
}
.content {
  @extend .md-text;
  outline: none;
  tab-size: 4;
  caret-color: #60a5fa;
  overflow: hidden;
  position: relative;
  line-height: 1.625em;
  white-space: normal;
  &.line-height-compact {
    line-height: 1.5em;
    .check-item{
      top: 2px
    }
  }
  &.line-height-loose{
    line-height: 1.9em;
    .check-item{
      top: 5px;
    }
  }
  .link{
    text-decoration: underline;
  }
  .mermaid-container{
    @apply mb-3 cursor-default select-none bg-gray-500/5 py-3 rounded flex justify-center;
  }
  [data-fnc="fnc"] {
    font-size: .85em;
    @apply dark:text-teal-500 align-super px-0.5 dark:hover:text-teal-600 duration-200 text-teal-600 hover:text-teal-500;
  }
  [data-fnd="fnd"] {
    @apply dark:text-lime-500 px-0.5 dark:hover:text-lime-600 duration-200 text-lime-600 hover:text-lime-500;
  }
  pre {
    margin: 0;
    .line{
      display: inline;
    }
  }
  .high-text{
    border-radius: 1px;
    background: var(--md-high);
  }
  table, th, td {
    border-width: 1px;
    border-style: solid;
    border-collapse: collapse;
    @apply border-gray-300/80 dark:border-gray-300/20;
  }

  table {
    width: 100%;
    &:not(:last-child){
      margin-bottom: 12px;
    }
  }

  th, td {
    padding: 0.375em 0.75em;
    text-align: left;
  }

  th {
    @apply dark:bg-gray-600/20 bg-gray-200/50;
  }

  p {
    &:not(:last-child){
      margin-bottom: 0.75em;
    }
    &:last-child{
      margin-bottom: 0;
    }
  }
  h1,h2,h3,h4,h5,h6{
    position: relative;
    color: rgba(0,0,0,.8);
    padding-bottom: 0.15em;
    line-height: 1.5em;
  }
  h1 {
    font-size: 2em;
    margin-bottom: .6em;
    font-weight: 700;
  }

  h2 {
    font-weight: 600;
    font-size: 1.6em;
    margin: .6em 0;
  }
  h3 {
    font-weight: 600;
    font-size: 1.3em;
    margin: .6em 0;
  }

  h4 {
    font-weight: 500;
    font-size: 1.2em;
    margin-bottom: .8em;
    line-height: 1.2;
  }
  h5{
    font-weight: 500;
    font-size: 1em;
    margin-bottom: .75em;
  }
  a {
    font-weight: 500;
  }
  li{
    p:not(:last-child){
      margin-bottom: 0.375em;
    }
  }
  ul,ol {
    &:not(:last-child) {
      margin-bottom: 0.75em;
    }
  }
}

.inline-code {
  background: var(--md-bg-mute);
  border: 1px solid var(--md-bg-mute);
  font-size: .85em;
  border-radius: 4px;
  padding: 2px 5px;
  position: relative;
  word-break: break-word;
  top: -1px;
}

.m-table {
  position: relative;
  &:not(:last-child) {
    margin-bottom: 24px;
  }
  font-size: 0.9em;
}
.t-handle {
  @apply w-5 h-5 cursor-default duration-200 dark:hover:bg-gray-300/20 hover:bg-gray-300/40 rounded-sm flex items-center justify-center;
}

blockquote {
  padding: 4px 14px 4px 20px;
  position: relative;
  font-size: .9em;
  @apply bg-gray-200/50 dark:bg-gray-700/20 dark:text-gray-300 text-gray-600;
  blockquote{
    font-size: 1em;
  }
  &:not(:last-child) {
    margin-bottom: 12px;
  }
  margin-bottom: 0;
  &:before {
    content: '';
    left: -1px;
    top: -1px;
    height: calc(100% + 2px);
    @apply block absolute bg-blue-500 w-1;
  }
}

.m-list {
  list-style: disc;
  padding-left: 24px;
  padding-top: 5px;
  padding-bottom: 5px;
  li::marker{
    @apply text-gray-500;
  }
  li:not(.task){
    >:first-child{
      .drag-handle{
        padding-left: 2px;
        padding-right: 18px;
        left: -44px !important;
        top: .35em !important;
      }
    }
  }
  li.task >:nth-child(2) {
    .drag-handle{
      padding-left: 2px;
      padding-right: 42px;
      left: -68px !important;
      top: .35em !important;
    }
  }
}

ol.m-list {
  list-style: decimal;
}

.m-list-item {
  position: relative;
  word-break: break-all;
  padding: 0.1875em 0;
  p {
    line-height: inherit;
    margin: 0;
    &:not(:last-child) {
      margin-bottom: 12px;
    }
  }

  &.task {
    padding-left: 24px;
  }

  .check-item {
    display: inline-flex;
    align-items: center;
    position: absolute;
    user-select: none;
    height: 1.625em;
    left: 0;
    top: 3px;
    z-index: 10;
  }
}
.katex-container {
  .newline{
    margin: 4px 0;
  }
}
.m-hr {
  height: 1px;
  @apply dark:bg-gray-200/30 bg-gray-300;
  margin: 2em 0;
  border: none;
}

.code-highlight {
  background: var(--md-code-bg);
  border-radius: 4px;
  &.tab-2{
    tab-size: 2;
  }
  &.tab-4{
    tab-size: 4;
  }
  font-size: 0.85em;
  position: relative;
  line-height: 1.62em;
  direction: ltr;
  &.katex-container{
    pre{
      position: relative;
      padding: 1.8em 0;
      &:before,&:after{
        content: '$$';
        color: rgba(255, 255, 255, .5);
        position: absolute;
        left: 6px;
        font-size: 12px;
      }
      &:before{
        top:4px
      }
      &:after{
        bottom:4px
      }
    }
    .code-line-list{
      padding-top: 1.8em;
    }
  }
  &.frontmatter{
    &:before{
      top:2px;
      height: 22px;
      content: 'Front Matter';
      width: 100%;
      color: rgba(255, 255, 255, .5);
      position: absolute;
      z-index: 10;
      left: 0;
      padding-left: 10px;
      font-size: 12px;
      @apply border-b border-black/50;
    }
    .code-line-list{
      top: 24px;
      padding-top: 8px;
      height: calc(100% - 24px);
    }
    pre {
      padding-top: 32px;
      position: relative;
    }
  }
  pre{
    white-space: pre;
    padding: 10px 0;
    position: relative;
  }
  code{
    width: fit-content;
    display: inline-block;
    min-width: 100%;
    word-wrap: normal;
    word-spacing: normal;
    word-break: normal;
    hyphens: none;
  }
  .code-line-list{
    background: var(--md-code-bg);
    counter-reset: step;
    border-radius: 4px;
    counter-increment: step 0;
    height: 100%;
    position: absolute;
    z-index: 10;
    left: 0;
    padding-top: 10px;
    width:32px;
    top: 0;
    border-right: 1px solid rgba(0,0,0,.5);
    > div{
      &:before{
        content: counter(step);
        counter-increment: step;
        color: rgba(255, 255, 255, .5);
      }
      font-size: .93em;
      left: 0;
      top: 0;
      height: 22px;
      line-height: 22px;
      width: 32px;
      text-align: center;
    }
  }
  &.num {
    padding-left: 32px;
    code{
      padding-left: 14px;
    }
  }
  code{
    padding-left: 20px;
  }
  .code-line {
    padding-right: 20px;
    position: relative;
    height: 22px;
    line-height: 22px;
    //width: calc(100% + 24px);
  }

  .lang-select {
    width: 100px;

    .ant-select-selector {
      background: transparent;
    }

    input {
      text-align: center;
    }
  }
}

[data-be]{
  position: relative;
}
.move-mark{
  @apply h-0.5 dark:bg-white/50 bg-black/50 left-0 z-10 block absolute rounded top-0 duration-200;
}

.drag-handle {
  @apply absolute opacity-0 flex items-center select-none;
  padding-left: 2px;
  padding-right: 6px;
  left: -24px;
}
.drag-icon{
  @apply w-4 h-4 dark:text-gray-500 dark:hover:text-gray-300 text-gray-300 hover:text-gray-500 cursor-grab;
}
.drag-el:hover {
  >.drag-handle {
    opacity: 1;
  }
}
.inline-code-input{
  background: var(--md-code-bg);
  font-size: 0.9em;
  line-height: 1.3em;
  @apply mx-[1px] rounded-sm caret-sky-500 break-all text-gray-400;
}

.katex-display{
  margin: 0 !important;
}

.view {
  .drag-handle {
    display: none;
  }
  [data-be="link"]{
    pointer-events: none;
  }
}
.media-frame{
  @apply relative border-2 border-transparent block;
  .img-drag-handle{
    display: none;
    position: absolute;
    cursor: col-resize;
    border-radius: 100%;
    width: 9px;
    height: 9px;
    background: var(--bg);
    @apply border border-gray-500 dark:border-gray-400;
    &.t1{
      left: -5px;
      top: 50%;
      margin-top: -5px;
    }
    &.t2{
      right: -5px;
      top: 50%;
      margin-top: -5px;
    }
  }
  &.active{
    @apply border-blue-500/60;
    .img-drag-handle{
      display: inline-block;
    }
  }
}
.win{
  ::-webkit-scrollbar{
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-thumb{
    @apply dark:bg-zinc-900 bg-gray-400/90;
    border-radius: 20px;
  }
}
